<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="css/libs/weui.css">
    <link rel="stylesheet" href="css/libs/jquery-weui.min.css">
    <link rel="stylesheet" href="css/project.css">

    <script src="js/libs/jquery-3.0.0.min.js"></script>
    <script src="js/libs/weui.js"></script>
    <script src="js/project.js"></script>
    <style>
        .icon{display: inline-block;width: 50px;height: 50px;margin-right:10px;margin-bottom:25px;background: url("images/page4/icons5.png") no-repeat;background-size: 350px 50px;vertical-align: middle;}
        .icon1{background-position-x:-200px; }
        .icon2{background-position-x:-150px; }
        .icon3{background-position-x:-250px; }

        .weui_cells:before{display: none;}
        .weui_cells.unuse{opacity: 0.6;}
        .weui_cells{font-size: 14px;color: #999;margin: 10px;border-radius: 4px;}
        .weui_media_desc{font-size: 19px;color: #333;line-height: 1.8em; }

        .weui_cell_bd .weui_cell:before{left: 0;}


    </style>
</head>
<body>
<header class="header">
    <span class="back"></span>
    <p class="title">我的卡券</p>
</header>
<div style="height: 40px;"></div>

<!-- 可使用 -->
<div class="weui_cells_title">可使用</div>
<div class="weui_cells">
    <div class="weui_cell">
        <div class="weui_cell_hd"><span class="icon icon1"></span></div>
        <div class="weui_cell_bd weui_cell_primary">
            <p>序列号:58764300</p>
            <p class="weui_media_desc">￥30红包</p>
            <div class="weui_cell" style="padding-left: 0;padding-bottom: 0;">
                <div class="weui_cell_bd weui_cell_primary">有效期至:2016.09.30</div>
                <div class="weui_cell_ft">所有店</div>
            </div>
        </div>
    </div>
</div>

<div class="weui_cells">
    <div class="weui_cell">
        <div class="weui_cell_hd"><span class="icon icon2"></span></div>
        <div class="weui_cell_bd weui_cell_primary">
            <p>序列号:58764300</p>
            <p class="weui_media_desc">消费满100送30</p>
            <div class="weui_cell" style="padding-left: 0;padding-bottom: 0;">
                <div class="weui_cell_bd weui_cell_primary">有效期至:2016.09.30</div>
                <div class="weui_cell_ft">所有店</div>
            </div>
        </div>
    </div>
</div>

<!-- 不能用 -->
<div class="weui_cells_title">已使用</div>
<div class="weui_cells unuse">
    <div class="weui_cell">
        <div class="weui_cell_hd"><span class="icon icon3"></span></div>
        <div class="weui_cell_bd weui_cell_primary">
            <p>序列号:58764300</p>
            <p class="weui_media_desc">￥30红包</p>
            <div class="weui_cell" style="padding-left: 0;padding-bottom: 0;">
                <div class="weui_cell_bd weui_cell_primary">有效期至:2016.09.30</div>
                <div class="weui_cell_ft">所有店</div>
            </div>
        </div>
    </div>
</div>

<!-- 不能用 -->
<div class="weui_cells_title">已过期</div>
<div class="weui_cells unuse">
    <div class="weui_cell">
        <div class="weui_cell_hd"><span class="icon icon3"></span></div>
        <div class="weui_cell_bd weui_cell_primary">
            <p>序列号:58764300</p>
            <p class="weui_media_desc">￥30红包</p>
            <div class="weui_cell" style="padding-left: 0;padding-bottom: 0;">
                <div class="weui_cell_bd weui_cell_primary">有效期至:2016.09.30</div>
                <div class="weui_cell_ft">所有店</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>